const { defineConfig } = require("@vue/cli-service");
const AutoImport = require('unplugin-auto-import/webpack')
// const Components = require('unplugin-vue-components/webpack')
const path = require('path');//引入path模块
function resolve (dir) {
  return path.join(__dirname, dir) //path.join(__dirname)设置绝对路径
}

console.log("AutoImport", AutoImport.default);
const assetsCDN = {
  externals: {
    vue: 'Vue',
    moment: 'moment'
  },
  css: [],
  js: ['https://code.createjs.com/1.0.0/createjs.min.js', "https://code.createjs.com/1.0.0/tweenjs.min.js", "https://code.createjs.com/1.0.0/preloadjs.min.js", "https://code.createjs.com/1.0.0/preloadjs.min.js"],
};
module.exports = defineConfig({
  // pages: {
  //   index: {
  //     // page 的入口
  //     entry: 'src/main.ts',
  //     // 模板来源
  //     template: 'public/index.html',
  //     // 在 dist/index.html 的输出
  //     filename: 'index.html',
  //     // 当使用 title 选项时，
  //     // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //     title: 'Index Page',
  //     // 在这个页面中包含的块，默认情况下会包含
  //     // 提取出来的通用 chunk 和 vendor chunk。
  //     chunks: ['chunk-vendors', 'chunk-common', 'index'],
  //     cdn:cdn
  //   },
  //   // 当使用只有入口的字符串格式时，
  //   // 模板会被推导为 `public/subpage.html`
  //   // 并且如果找不到的话，就回退到 `public/index.html`。
  //   // 输出文件名会被推导为 `subpage.html`。
  // },
  outputDir: "distTest",
  assetsDir: "assets",
  publicPath: "./",
  lintOnSave: false,
  devServer: {
    open: false, // 自动启动浏览器
    host: "0.0.0.0",
    port: 9007, // 端口号
    // proxy: {
    //   "/api": {
    //     target: "https://www.api.com", // 目标代理接口地址
    //     pathRewrite: {
    //       "^/api": "/"
    //     }
    //   }
    // },
    hot: true,// 热更新
    compress: true, // 是否启动压缩 gzip
    // historyApiFallback: {
    //   rewrites: [
    //     { from: /^\/web\/.*$/, to: "/web.html" },
    //     { from: /^\/test\/.*$/, to: "/test.html" },
    //   ],
    // },
    headers: {
      'Access-Control-Allow-Origin': '*', // 微前端应用调试
    },
  },
  css: {
    loaderOptions: {
      scss: {
        // additionalData: `@use "/@/style/element.scss" as *;@use "/@/style/mixin.scss" as *;@use "/@/style/common.scss" as *;@use "/@/style/variables.scss" as *;`,
      },
    },
  },
  configureWebpack: {
    plugins: [
      AutoImport.default({
        dts: './src/auto-imports.d.ts',
        imports: ['vue', 'vue-router'],
      }),
      // Components({
      //   resolvers: [],
      // }),
    ]
  },
  chainWebpack: (config) => {
    config.plugin('html').tap(args => {
      args[0].cdn = assetsCDN;
      return args;
    });
    config.externals = assetsCDN.externals;
    config.resolve.alias
      .set('@', resolve('./src'));
    // 合并文件
    config.optimization.splitChunks({
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.(s?css|less|sass)$/,
          chunks: 'all',
          priority: 10
        },
        common: {
          name: 'chunk-common',
          chunks: 'all',
          minChunks: 2, // 拆分前必须共享模块的最小 chunks 数。
          maxInitialRequests: 5, // 打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件）
          minSize: 0, // 生成 chunk 的最小体积
          priority: 1, // 优化将优先考虑具有更高 priority（优先级）的缓存组
          reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
        },
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
          priority: 2,
          reuseExistingChunk: true
        },
      }
    })
  },
});
